<template>
    <div class="boxa">
        <heard :title="title"></heard>
        <van-search v-model="value" placeholder="请输入搜索关键词" @click="search" />
        <van-tabs v-model:active="active" animated>
            <van-tab title="推荐">
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in images" :key="image">
                        <img :src="image" style="width: 100%;height: 200px;" />
                    </van-swipe-item>
                </van-swipe>
                <div v-show="djs">
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span>秒杀倒计时：</span>
                            <span class="block">20</span>
                            <span class="colon">:</span>
                            <span class="block">11</span>
                            <span class="colon">:</span>
                            <span class="block">{{ time }}</span>
                             <img src="./img/a-a.png" alt="" style="width: 100%;height: 125px;"></img>

                        </template>
                       
                    </van-count-down>

                </div>

                <div>
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <!-- <van-list loading="loading1" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
                        <van-grid :border="false" :column-num="2">
                            <van-grid-item v-for="item in list"
                                :style="item % 2 == 0 ? { height: '20rem' } : { height: '30rem' }">
                                <van-image
                                    :src="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                                <p>{{ item.goods_name }}</p>
                                <p>{{ item.goods_price }}</p>
                            </van-grid-item>
                        </van-grid>
                        <!-- </van-list> -->
                    </van-pull-refresh>
                </div>
            </van-tab>
            <van-tab title="美食">内容 2</van-tab>
            <van-tab title="运动">内容 3</van-tab>
            <van-tab title="保健品">内容 4</van-tab>
            <van-tab title="内衣">内容 4</van-tab>

        </van-tabs>


    </div>
</template>

<script setup>
import heard from '@/components/heard.vue';
const title = "首页"
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
import router from '@/router';
const search = () => {
    router.push('/search')

}
import { showToast } from 'vant';
import { ref } from 'vue';
import { searchApi } from '@/api/api';
// import router from '@/router';
let list = ref([])
searchApi().then(res => {
    console.log('列表', res)
    list.value = res.data.message.goods
})
let time = ref(10)
let djs = ref(true)
let timer
timer = setInterval(() => {
    time.value--
    if (time.value == 0) {
        clearInterval(timer)
        djs.value = false
    }
}, 1000)
const loading = ref(false);
const onRefresh = () => {
    searchApi()
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;


    }, 1000);

};




</script>

<style lang="scss" scoped>
.boxa{
    width: 100%;
    height: 100%;
    overflow: auto;
    .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
}

.box {
    width: 80%;
    height: 45px;
    background: #f0f0f0;
    border-radius: 2.5rem;
    position: fixed;
    z-index: 999;
    bottom: 100px;
    align-items: center;

    span {
        flex: 1;
    }
}

}



</style>